import React, { useEffect, useState } from 'react'
import { useLocation, useNavigate } from 'react-router-dom'
import { getCarAdd, getDetail } from '../../api';
import { NavBar, Space, Toast } from 'antd-mobile'
import { MoreOutline, } from 'antd-mobile-icons'
import { Swiper, SwiperItem } from '@nutui/nutui-react';
import './detail.css'
import { ActionBar } from 'react-vant';
import { CartO, ChatO } from '@react-vant/icons'
import { useSelector } from 'react-redux';

export default function Detail() {
  let [list, setList] = useState([])
  let [arr, setArr] = useState({})
  // let [userId, setUserId] = useState('')
  let location = useLocation()
  let navigate = useNavigate()
  const id = location.pathname.substring(location.pathname.indexOf('/', 1) + 1);
  console.log(id);

  const right = (
    <div style={{ fontSize: 24 }}>
      <Space style={{ '--gap': '16px' }}>
        <MoreOutline />
      </Space>
    </div>
  )

  const back = () => {
    navigate(-1)
  }

  // const items = 
  // ))
  // setUserId()
  let { userId } = useSelector(state => state.user)
  // console.log(userId);
  useEffect(() => {
    getDetail(id).then(res => {
      console.log(res.data.data);
      setArr(res.data.data)
      const images = Object.keys(res.data.data).filter(key => key.startsWith('img')).map(key => res.data.data[key]);
      setList(images)
    })
  }, [])

  const add = () => {
    // console.log(666);
    getCarAdd({ proid: id, userid: userId, num: 1 }).then(res => {
      console.log(res);
    })
  }
  return (
    <div>
      <NavBar right={right} onBack={back}>
        详情
      </NavBar>

      <div className="demo-box" style={{ height: 150 }}>
        <Swiper
          height='350'
          autoPlay="3000"
          indicator='true'
        >
          {
            list.map((item, index) => {
              return <SwiperItem key={index} >
                <img src={item} alt="" />
              </SwiperItem>
            })
          }
        </Swiper>

        <p>￥{arr.originprice}</p>
        <p>{arr.proname}</p>
      </div>

      <div className='demo-action-bar'>
        <ActionBar>
          <ActionBar.Icon icon={<ChatO />} text='客服' />
          <ActionBar.Icon icon={<CartO />} text='购物车' onClick={() => navigate('/car')} />
          <ActionBar.Button color='#be99ff' type='warning' text='加入购物车' onClick={add} />
          <ActionBar.Button color='#7232dd' type='danger' text='立即购买' />
        </ActionBar>
      </div>
    </div>
  )
}
